<html>
<head>
<style>
	body{
	position: fixed;
	width: 80%; 
	height: 100%;
	top: 0px;
	}
	#tabs .ui-tabs-nav li {
	margin-top: 1.6em;
	font-size: 90%;
	}
	#tabs .ui-tabs-nav li.ui-tabs-selected {
	margin-top: 1em;
	font-size: 100%;
	}
	.labelSize{
	font-size: 13px;
	}
	.mapdiv{
	position: absolute; 
	width:1015px; 
	height:580px; 
	left:0px; 
	top: 60px;
	}
	.login{
	position: absolute; 
	left: 1230px; 
	top: 35px;
	height: 16%;
	}
	.submit{
	position: absolute;
	left: 1017px;
	top: 585px;
	width: 20%;
	height: 5%;
	}
	.mainForm{
	position: absolute; 
	left: 330px; 
	top: 100px;
	width: 70%;
	height: 80%;
	border-style: solid;
	}
	.poi{
	 position: absolute; 
	 width: 20%; 
	 height:90%; 
	 left: 1017px; 
	 top: 60px;
	 border-style: solid;
	}
	.sample1{
		position: fixed;
		left: 1035px;
		top: 450px;
		background-color:pink;
		width: 20%;
		height: 10%;
	}
	.sample2{
		position: fixed;
		left: 1035px;
	"clickMap_tabs.html"	top: 500px;
		background-color:yellow;
		width: 20%;
		height: 19%;
	}
</style>
<link type="text/css" href="jquery-ui/css/hot-sneaks/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="jquery-ui/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript'>

$(function(){
	   //When the button with an id of submit is clicked (the submit button)
        $("#submit").click(function(){
        
        //Retrieve the contents of the textarea (the content)
        var formvalue1 = $("#singleOutput1").val();
        var formvalue2 = $("#singleOutput2").val();
        var formvalue3 = $("#markerName").val();
        var formvalue4 = $("#poiTypes").val();
        var formvalue5 = $("#markerDesc").val();
        var formvalue6 = $("#markerRule").val();
        
        var formvalue7 = $("#UUname").val();
        var formvalue8 = $("#UUaddress").val();
        var formvalue9 = $("#UUnumber").val();
        
        var dataString = '&longitude='+ formvalue1 + '&latitude=' + formvalue2 + '&markerName=' + formvalue3 + '&poiType=' + formvalue4 + '&markerDesc=' + formvalue5 + '&markerRule=' + formvalue6 + '&UUname=' + formvalue7 + '&UUaddress=' + formvalue8 + '&UUnumber=' + formvalue9;
        
        //Use jQuery's ajax function to send it
         $.ajax({
           type: "POST",
           url: "addMarker.php",
           data: dataString,
           success: function(){
        
        //If successful , notify the user that it was added
           $("#msg").html("<p class='add'>You just added a Maker in the database!</p>").fadeTo(1500,1);
           $("#singleOutput1").val('');
           $("#singleOutput2").val('');
           $("#markerName").val('');
           $("#poiTypes").val('');
           $("#markerDesc").val('');
           $("#markerRule").val('');
           $("#UUname").val('');
           $("#UUaddress").val('');
           $("#Uunumber").val('');
           }
         });
        
        //We return false so when the button is clicked, it doesn't follow the action
        return false;
                });
			});				

		var map, controls, markers;
		var key = "single";
		var size = new OpenLayers.Size(26,53);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('red.png',size,offset);
		var markers = new OpenLayers.Layer.Markers("Markers");
		var markerUrl = "";
		
		OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
	                defaultHandlerOptions: {
	                    'single': true,
	                    'double': false,
	                    'pixelTolerance': 0,
	                    'stopSingle': false,
	                    'stopDouble': false
	                },

	                initialize: function(options) {
	                    this.handlerOptions = OpenLayers.Util.extend(
	                        {}, this.defaultHandlerOptions
	                    );
	                    OpenLayers.Control.prototype.initialize.apply(
	                        this, arguments
	                    ); 
	                    this.handler = new OpenLayers.Handler.Click(
	                        this, {
	                            'click': this.onClick
	                        }, this.handlerOptions
	                    );
	                }, 
	
	                onClick: function(e) {	  
						var output1 = document.getElementById(key + "Output1");
						var output2 = document.getElementById(key + "Output2");	
                    
						var xy = map.getLonLatFromViewPortPx(e.xy);
								
						var lonlat = xy.transform(map.projection, map.displayProjection);
								
						var Longitude = lonlat.lon;
						var Latitude = lonlat.lat;
						
						markers.addMarker(new OpenLayers.Marker(lonlat, icon));
						
						output1.value = "";
						output2.value = "";
		
						output1.value = output1.value + Longitude;
						output2.value = output2.value + Latitude;
	                }
	
	            });

	
	function init()
	{
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution(),
				new OpenLayers.Control.Permalink(),
				new OpenLayers.Control.ScaleLine(),
				new OpenLayers.Control.OverviewMap(),
				new OpenLayers.Control.MousePosition()],
				numZoomLevels: 14,
				units: 'mi',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		
		//Set start centrepoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom);  
		
		map.addLayer(markers);
		
		var coordAddy = "_";
			if(coordAddy.length > 2)
			{
				<!-- Marker Array Generated by php -->

				markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(_).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),icon.clone())); 

 				
				map.zoomToExtent(markers.getDataExtent());
				markerUrl = coordAddy;
                document.getElementById('markerLink').innerHTML = "<a href=file:///C:/Users/babygirl/Documents/OpenLayers/clickMap.html?coords=" + markerUrl + ">Link to map with current markers</a>";
            }
		
		var click = new OpenLayers.Control.Click();
	    map.addControl(click);
		click.activate();
		
		var output1 = document.getElementById(key + "Output1");
        output1.value = "";
		var output2 = document.getElementById(key + "Output2"); 
        output2.value = "";
			
	}
	
	$(function ()
		{
			
			$( "#tabs" ).tabs();
			$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
			var name = $( "#name" ),
			address = $( "#address" ),
			password = $( "#password" ),
			allFields = $( [] ).add( name ).add( address ).add( password ),
			tips = $( ".validateTips" );
			
			function updateTips( t ) {
				tips
					.text( t )
					.addClass( "ui-state-highlight" );
				setTimeout(function() {
					tips.removeClass( "ui-state-highlight", 1500 );
				}, 500 );
			}

			function checkLength( o, n, min, max ) {
				if ( o.val().length > max || o.val().length < min ) {
					o.addClass( "ui-state-error" );
					updateTips( "Length of " + n + " must be between " +
						min + " and " + max + "." );
					return false;
				} else {
					return true;
				}
			}

			function checkRegexp( o, regexp, n ) {
				if ( !( regexp.test( o.val() ) ) ) {
					o.addClass( "ui-state-error" );
					updateTips( n );
					return false;
				} else {
					return true;
				}
			}
			
			$( "#dialog-form1" ).dialog({
				autoOpen: false,
				height: 300,
				width: 380,
				modal: true,
				buttons: {
					"Submit": function() {
						var bValid = true;
						allFields.removeClass( "ui-state-error" );

						bValid = bValid && checkLength( username, "username", 3, 16 );
						bValid = bValid && checkLength( password, "password", 6, 80 );

						bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
						// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
						bValid = bValid && checkRegexp( password, /^[a-z]([0-9a-z_])+$/i, "Address may consist of a-z, 0-9, underscores, begin with a letter." );
						

						if ( bValid ) {
							$( "#users tbody" ).append( "<tr>" +
								"<td>" + username.val() + "</td>" + 
								"<td>" + password.val() + "</td>" + 
							"</tr>" ); 
							$( this ).dialog( "close" );
						}	 
						
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					allFields.val( "" ).removeClass( "ui-state-error" );
				}
			});

			$("#registered-user")
				.button()
				.click(function() {
						$("#dialog-form1").dialog("open");
				});
			
			$( "#unregistered-user" )
				.button()
				.click(function() {
				
				});
			
		});
	
</script>
</head>
<body onload="init()">
<div id="tabs">
	<ul>
		<!-- <li><a href="#mainPage">Main Page</a></li> -->
		<li><a href="#mapPage">MEYN FEYJ</a></li>
	</ul>
		
	<div id="login" class="login">
		<input type="button" id="registered-user" value="Login">
		</div>
		
	<span id="ajax-message"></span> 
		
	<div id="mapPage">
	<form id="ajax-form" action="addMarker.php" method="POST">
		<div id="mapdiv" class="mapdiv"></div>
		<div id="poi" title="Add POI" class="poi">
		<table>
		<tr>
			<td><label for="longitude" class="labelSize">Longitude: </label> <br />
			<input type="text" name="longitude" id="singleOutput1" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
		<tr>
			<td><label for="latitude" class="labelSize">Latitude: </label> <br />
			<input type="text" name="latitude" id="singleOutput2" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
		<tr>
			<td><label for="markerName" class="labelSize">POI Name: </label> <br />
			<input type="text" name="markerName" id="markerName" class="text ui-widget-content ui-corner-all" /></td>
		</tr>
		<tr>
			<td><label for="poiType" class="labelSize">Points of Interest: </label> <br />
			<select name="poiType" id="poiTypes" class="labelSize">
				<option value="equipment">Equipment</option>
				<option value="resources">Resources</option>
				<option value="supplies">Supplies</option>
				<option value="humanresource">Human Resource</option>
			</select></td>
		</tr>
		<tr>
			<td><label for="markerDesc" class="labelSize">Description: </label> <br />
			<textarea rows="3" cols="15" name="markerDesc" id="markerDesc"></textarea>
			</td>
		</tr>
		<tr>
			<td><label for="markerRule" class="labelSize">Rules: </label> <br />
				<textarea rows="3" cols="15" name="markerRule" id="markerRule"></textarea>
			</td>	
		</tr>
		<tr>
			<td><hr></hr></td>
		</tr>
		<tr>
			<td><label for="UUname" class="labelSize">Name: </label> <br />
			<input type="text" name="UUname" id="UUname" /></td>
		</tr>
		<tr>
			<td><label for="UUaddress" class="labelSize">Address: </label> <br />
			<input type="text" name="UUaddress" id="UUaddress" /></td>
		</tr>
		<tr>
			<td><label for="UUnumber" class="labelSize">Contact Number: </label> <br />
			<input type="text" name="UUnumber" id="UUnumber"  /></td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr>
        	<td><div class="msg" id="msg"> </div></td>
		</tr>
		</table>
		</div>
		</form>
		</div>
	</div>
	
	<div><input type="submit" id="submit" class="submit" value="Save as Unregistered User">
	</div>

	
	<div id="dialog-form1" title="Registered User">
	<p class="validateTips">All form fields are required.</p>
	<fieldset>
		<label for="username">Username</label>
		<input type="text" name="username" id="username"  />
		<br />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" />
	</fieldset>
	</div>
</body>
</html>	